var jd = document.querySelector(".JDshow");
var hbdq = document.querySelector(".HBshow");
var oproduct = document.querySelector(".products");
// 店铺
(function () {
    const xhr = new XMLHttpRequest();
    xhr.open("get", "http://chst.vip:1234/api/getgsshop");
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);
            var rex = res.result;
            var ele = "";

            rex.forEach(item => {
                ele += `
        <li productid="${item.shopId}">${item.shopName}</li>
    
        `
            });
            jd.innerHTML = ele
        }
    }
})();


// 地区
(function () {
    const xhr = new XMLHttpRequest();
    xhr.open("get", "http://chst.vip:1234/api/getgsshoparea");
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var res = JSON.parse(xhr.responseText);
            var rex = res.result;
            var ele = "";

            rex.forEach(item => {
                ele += `
            <li productid="${item.areaId}">${item.areaName}</li>
    
        
            `
            });
            hbdq.innerHTML = ele
        }
    }
})();
// 点击出现店铺 区域/点击店铺 区域渲染商品页面

(function () {
    let shopid = 0;
    let areaid = 0;
    // 点击
    $(".JD").click(function () {
        $(".JDshow").next().css("display", "none").end().slideToggle();
        $(".JDshow li").click(function () {
            shopid = $(this).attr("productid");
            console.log(shopid);
            document.querySelector(".JD p").innerHTML = this.innerHTML;
            console.log(oproduct);
            const xhr = new XMLHttpRequest();
            xhr.open("get", 'http://chst.vip:1234/api/getgsproduct?shopid=' + shopid + "&areaid=" + areaid);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var res = JSON.parse(xhr.responseText);
                    var rex = res.result;
                    var ele = "";

                    rex.forEach(item => {
                        ele += `
            <li>
            <img src="${item.productImg}"">
            <p>${item.productName}</p>
            <span>${item.productPrice}</span>
          </li>  
            `
                    });
                    oproduct.innerHTML = ele
                }
            }

            // $.ajax({
            //     url: 'http://chst.vip:1234/api/getgsproduct?shopid='+shopid+"&areaid="+areaid,
            //     type:"GET",
            //     dataType:"jspon",
            //     success(req){
            //         var ele = ""
            //         var res = req.result;
            //         res.forEach(item => {
            //          ele += `
            //          <li>
            //          <img src="${item.productImg}"">
            //          <p>${item.productPrice}</p>
            //          <span>${item.productName}</span>
            //        </li>  
            //          `   
            //         })
            //         oproduct.innerHTML = ele;
            //         console.log(ele)
            //     }
            // })
        })
    })

    $(".hb").click(function () {
        $(".HBshow").prev().css("display", "none").end().slideToggle();
        $(".HBshow li").click(function () {
            areaid = $(this).attr("productid");
            document.querySelector(".hb p").innerHTML = this.innerHTML.substr(0, 2);

            $.ajax({
                url: 'http://chst.vip:1234/api/getgsproduct?shopid=' + shopid + "&areaid=" + areaid,
                type: "GET",
                dataType: "json",
                success(req) {
                    var res = req.result;
                    var ele = ""
                    res.forEach(item => {
                        ele += `
                    <li>
                    <img src="${item.productImg}"">
                    <p>${item.productPrice}</p>
                    <span>${item.productName}</span>
                  </li>  
                     
                    `
                    })
                    oproduct.innerHTML = ele;
                }
            })
        })
    })
})();


(function () {
    let shopid = 0;
    let areaid = 0;


    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://chst.vip:1234/api/getgsproduct?shopid=" + shopid + "&areaid=" + areaid);
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            let req = JSON.parse(xhr.responseText);
            // console.log(req)
            let reqArr = req.result;
            // console.log(req.result)

            let ele = "";
            reqArr.forEach(item => {
                // console.log(item)

                ele += `
                <li>
                <img src="${item.productImg}"">
                <p>${item.productName}</p>
                <span>${item.productPrice}</span>
              </li>  
                        `
            })

            oproduct.innerHTML = ele;
        }
    }


    $('.gotop').click(function () {
        $('body, html').animate({ scrollTop: 0 }, 1000)
    })
})();
